<template>
  <div class="background">
    <el-container style="padding:30px;">
      <el-header>
        <el-row :gutter="7">
          <el-col :span="6">
            <img src="/imgs/login/logo.png" alt="" class="image_logo">
          </el-col>
          <!-- <el-col :span="1">
            <img src="/imgs/login/verticalLine.png" style="height: 3.5rem;" alt=""></img>
          </el-col> -->
          <el-col :span="17" class="title">
            <h1 style="color: #fff;font-size:2rem;">双体软件精英产业学院学生学分管理系统</h1>
          </el-col>
        </el-row>
      </el-header>

      <el-main>
        <el-row :gutter="40">
          <el-col :span="12">
            <!-- 1.设置视角 -->
            <div class="show">
              <!-- 2.外层boxs代表正方"体" -->
              <div class="boxs">
                <!-- 3.内层每个div代表正方体的每个"面" -->
                <div class="p1"><img src="/imgs/login/linjie.png" alt="" style="height: 12.5rem;width: 12.5rem;"></div>
                <div class="p2"><img src="/imgs/login/linjie.png" alt="" style="height: 12.5rem;width: 12.5rem;"></div>
                <div class="p3"><img src="/imgs/login/linjie.png" alt="" style="height: 12.5rem;width:12.5rem;"></div>
                <div class="p4"><img src="/imgs/login/linjie.png" alt="" style="height: 12.5rem;width: 12.5rem;"></div>
                <div class="p5"><img src="/imgs/login/linjie.png" alt="" style="height: 12.5rem;width: 12.5rem;"></div>
                <div class="p6"><img src="/imgs/login/linjie.png" alt="" style="height: 12.5rem;width: 12.5rem;"></div>
              </div>
            </div>

          </el-col>
          <el-col :span="2">
          </el-col>
          <el-col :span="8">
            <el-card style="margin-top: 10rem;opacity: 0.7;">
              <h2 style="text-align: center;margin-bottom: 30px">用户登陆</h2>

              <el-form label-position="top">
                <el-form-item label="用户名">
                  <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
                </el-form-item>

                <el-form-item label="密码">
                  <el-input show-password placeholder="请输入密码" v-model="user.password"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" style="width: 100%;" @click="login">登录</el-button>
                </el-form-item>
              </el-form>
              <div style="color: #666;text-align: center;font-size: 14px;padding: 10px 0">
                （体验账号：tom/123456）
              </div>
            </el-card>
          </el-col>
          <el-col :span="3"></el-col>
        </el-row>
      </el-main>

    </el-container>
  </div>

</template>

<script setup>
import { ref } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import router from "@/router";

//1.定义响应式对象用来保存登陆表单中的数据
const user = ref({ username: '', password: '' });

//2.定义登陆方法（点击登陆按钮时触发）
const login = () => {
  //非空校验
  let isFormValid = true;
  if (!user.value.username) {
    ElMessage.error("用户名不能为空");
    isFormValid = false;
  }
  if (!user.value.password) {
    ElMessage.error("密码不能为空");
    isFormValid = false;
  }

  if (!isFormValid) return;

  console.log(user.value)
  //3.发出登陆请求
  axios.post(BASE_URL + '/v1/user/login', user.value)
      .then((response) => {
        //回调函数：服务器响应后才执行此处代码
        //response是响应对象，我们可以通过response.data得到服务器响应的数据
        console.log(response.data);
        if (response.data.code === 2000) {
          ElMessage.success("登陆成功");
          //   登陆成功后向localStorage中存储用户信息
          //注意：必须是字符串类型的键值对
          localStorage.setItem('user', JSON.stringify(response.data.data))
          const token = response.data.data.token;
          console.log('Token:', token); // 确认 token 是否正确
          localStorage.setItem('token', token)
          router.push('/user');
        } else {
          ElMessage.error(response.data.msg);
          user.value = { username: '', password: '' };
        }
      })
}

</script>

<style scoped>
.background {
  background-image: url('../assets/login_bg.png');
  width: 100%;
  height: 100vh;
}

.image_logo {
  width: 30rem;
  height: 3.15rem;
  margin-left: -1.875rem;
}

.title {
  margin: 5rem auto;

}

/* 4.给所有"面"做统一样式设置 */
.boxs>div {
  /* 设置宽高 */
  width: 200px;
  height: 200px;
  /* 编码阶段暂时使用的边框，后续优化 */
  border: 3px solid red;
  /* 设置文字大小 */
  font-size: 80px;
  /* 文字水平居中 */
  text-align: center;
  /* 文字垂直居中 */
  line-height: 200px;
  /* 5.六个面先脱离文档流，后续再通过变换构建正方体 */
  position: absolute;
  /* 16.每个面的美化 */
  /* 金色的边框与文字 */
  border: 1px solid gold;
  color: gold;
  /* 设置边框圆角 */
  border-radius: 30px;
  /* 设置带不透明度的背景颜色 1完全不透明 0透明到看不见 */
  background-color: rgba(255, 255, 255, 0.6);
  /* 用阴影制作发光效果 */
  box-shadow: 0 0 60px 0 gold;
}

/* 6.定义视角 */
.show {
  /* 视角距离一般就是800px
   太小，距离太近，元素变形严重
   太大，距离太远，元素3D效果不明显*/
  perspective: 900px;
}

/* 7.给"体"开启3D效果 */
.boxs {
  /* 注意:给父元素加
  这样父元素中的所有子元素才可以使用3D变换效果 */
  transform-style: preserve-3d;
  /* 8.子元素绝对定位脱离了文档流，需要设置父亲的宽高 */
  width: 200px;
  height: 200px;
  /* 9.让正方体水平居中，垂直方向靠下一点 */
  margin: 200px auto;
  /* 12.2 给正方体使用动画，六个面都需要同步旋转 */
  /* 播放动画:动画名turn 时长10s 匀速播放linear 无限次infinite */
  animation: turn 10s linear infinite;
}

/* 12.3 当悬停在正方体上时，动画播放状态暂停 */
.boxs:hover {
  animation-play-state: paused;
}

/* 10.设置正方体中“前面”在空间中的位置 */
.boxs>.p1 {
  transform: translateZ(100px);
}

/* 11.设置正方体中“后面”在空间中的位置 */
.boxs>.p2 {
  /* 13.文字要设置水平镜面翻转 scaleX(-1)*/
  transform: translateZ(-100px) scaleX(-1);
}

/* 14.把后面剩下的4个面放到对应位置 */
.boxs>.p3 {
  /* 先Y轴(垂直)旋转90度，再沿着Z轴出来100px */
  transform: rotateY(90deg) translateZ(100px);
}

.boxs>.p4 {
  /* 先Y轴(垂直)旋转90度，再沿着Z轴进去100px */
  transform: rotateY(90deg) translateZ(-100px) scaleX(-1);
}

.boxs>.p5 {
  /* 先X轴(水平)旋转90度，再沿着Z轴出来100px */
  transform: rotateX(90deg) translateZ(100px);
}

.boxs>.p6 {
  /* 先X轴(水平)旋转90度，再沿着Z轴进去100px */
  transform: rotateX(90deg) translateZ(-100px) scaleX(-1);
}

/* 12.1 定义动画，让正方体转起来 */
@keyframes turn {
  100% {
    /* 表示到动画结束时，同时绕X轴、Y轴转1圈，Z轴不旋转 */
    transform: rotate3d(1, 1, 0, 360deg);
  }
}

.head {
  background: linear-gradient(45deg, #ff6f00 0%, #ffca28 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}


</style>
